<template>
  <div class="container">
    <video autoplay="autoplay" muted="muted" loop="loop" class="video" src="https://slwl-admin.itheima.net/static/media/video.3cf57b17.mp4" />

    <div class="login-form">
      <img class="imgLogo" src="@/assets/common/logo1.33ef7fa0.png" alt="">
      <el-card>
        <el-form ref="form" :model="loginForm" :rules="rules">
          <el-form-item prop="mobile">
            <el-input v-model="loginForm.account" prefix-icon placeholder="账号" />

          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" prefix-icon placeholder="密码" />
          </el-form-item>
          <el-form-item prop="code">
            <input v-model="loginForm.code" type="text" autocomplete="off" placeholder="验证码" name="code" class="el-input__inner">
            <img class="code" :src="codeImg" alt="" @click="onCode">
          </el-form-item>
          <el-button class="loginDL" type="primary" @click="subLogin">登录</el-button>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script>
import { yzmLogin } from '@/api/user'
export default {

  name: 'Login',

  data() {
    return {
      loginForm: {
        account: 'demo',
        password: '888itcast.CN764%...',
        code: '',
        key: '1'
      },
      codeImg: null,
      formData: {
        mobile: '',
        password: ''
      },
      rules: {
        mobile: [
          { required: true, message: '不能为空', trigger: 'blur' }],
        password: [
          { required: true, message: '不能为空', trigger: 'blur' }]

      }
    }
  },
  created() {
    this.yzmGet()
  },
  methods: {
    async onCode() {
      console.log(123)
      this.loginForm.key = await this.getRandomInt(1, 10)
      this.yzmGet()
    },
    async yzmGet() {
      const res = await yzmLogin(this.loginForm.key)
      console.log(res)
      console.log(URL.createObjectURL(res.data))
      this.codeImg = URL.createObjectURL(res.data)
    },
    // 随机数
    getRandomInt(min, max) {
      min = Math.ceil(min)
      max = Math.floor(max)
      return Math.floor(Math.random() * (max - min + 1)) + min
    },
    // 登录请求
    async subLogin() {
      await this.$store.dispatch('user/login', this.loginForm)
      this.$message.success('准备起飞')
      this.$router.push('/')
    }

  }
}
</script>
<style>
.video{
  overflow-clip-margin: content-box;
    overflow: clip;
}
.login-form{
position: absolute;
    top: 45%;
    left: 45%;
    margin: -180px 0 0 -160px;
    width: 450px;
    height: 490px;
    padding: 36px 40px;
    background: #fff;
    border-radius: 10px
}
.imgLogo{
 height: 54px;
 margin-bottom: 20px;
  overflow-clip-margin: content-box;
    overflow: clip;
    width: 200px;
    border-style: none;
    margin-left: 80px;

}
.loginDL{
width: 100%;
    height: 54px;
    margin-bottom: 30px;
    margin-top: 22px;
    background-color: #e15536;
    border: 0;
    font-size: 18px;
    color: #fff;
    font-weight: 700;}
    .log1{
      width: 21px;
    height: 21px;
    position: absolute;
    left: 14px;
    top: 13px;
    }
</style>
